
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:guochaoapp/common/widges/gctabbar.dart';
import 'package:guochaoapp/controller/mall_controller.dart';
import 'package:guochaoapp/r.dart';

class GCMallPage extends StatefulWidget {
  @override
  _GCMallPageState createState() => _GCMallPageState();
}

class _GCMallPageState extends State<GCMallPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  GCMallController c = Get.put(GCMallController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Obx(() => _initSubviews()));
  }

  _initSubviews() {
    return GestureDetector(
      onTap: () {
        FocusScope.of(Get.context).requestFocus(FocusNode());
        c.caluTotalPrice();
      },
      child: Column(
        children: [
          SizedBox(height: ScreenUtil().statusBarHeight),
          Expanded(
            child: Container(
              child: Stack(children: [
                Image.asset(R.assetsIconMallBg,
                    fit: BoxFit.cover, width: double.infinity),
                c.mallInitList.length > 0
                    ? DefaultTabController(
                        length: c.mallInitList.length,
                        child: Column(
                          children: <Widget>[
                            _firstCategoryTabList(),
                            _secondCategoryTabList(),
                            Expanded(child: _categoryPageList()),
                          ],
                        ),
                      )
                    : Container(),
              ]),
            ),
          ),
        ],
      ),
    );
  }

  _firstCategoryTabList() {
    List<Tab> tabList = c.mallInitList.map((data) {
      return Tab(
        icon: CachedNetworkImage(
            imageUrl: data.img,
            width: 20,
            height: 20,
            color: Theme.of(Get.context).primaryColor),
        text: data.categoryName,
      );
    }).toList();

    var tabBar = GCTabBar(
        didSelected: (index) {
          c.firstCategoryItemTap(index);
        },
        backgroundColor: Colors.white,
        unselectedBackgroundColor: Colors.transparent,
        unselectedLabelStyle: TextStyle(color: Colors.white),
        labelStyle: TextStyle(
            color: Theme.of(Get.context).primaryColor,
            fontWeight: FontWeight.bold),
        tabs: tabList);
    return tabBar;
  }

  _secondCategoryTabList() {
    if (c.mallInitList.length == 0) {
      return Container();
    }
    var brandList = c.mallInitList[c.categorySelectList[0]].brandList;

    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Container(
        width: double.infinity,
        height: 50,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
        ),
        child: Row(children: [
          SizedBox(width: 8),
          Text("品牌",
              style: TextStyle(
                  color: Theme.of(Get.context).primaryColor, fontSize: 14)),
          SizedBox(width: 8),
          Expanded(
            child: ListView.builder(
                padding: EdgeInsets.only(top: 10, bottom: 10),
                scrollDirection: Axis.horizontal,
                itemCount: brandList.length,
                itemBuilder: (context, itemIndex) {
                  return Container(
                      padding: EdgeInsets.all(3),
                      child: Stack(
                        alignment: AlignmentDirectional.topEnd,
                        children: [
                          FlatButton(
                            onPressed: () {
                              c.brandItemTap(itemIndex);
                            },
                            color: Color(0xFFE5F3F4),
                            minWidth: 20,
                            padding: EdgeInsets.only(left: 11, right: 11),
                            shape: RoundedRectangleBorder(
                              side: BorderSide(
                                  color: Theme.of(Get.context).primaryColor,
                                  width: 1,
                                  style: BorderStyle.solid),
                              borderRadius: BorderRadius.circular(2),
                            ),
                            child: Text(
                              brandList[itemIndex].brandName,
                              style: TextStyle(
                                  fontSize: 12, color: Color(0xFF333333)),
                            ),
                          ),
                          c.categorySelectList[1] == itemIndex
                              ? Image.asset(R.assetsIconMallCategorysel,
                                  fit: BoxFit.cover, width: 13, height: 10)
                              : Container()
                        ],
                      ));
                }),
          ),
          SizedBox(width: 8),
        ]),
      ),
    );
  }

  _getSpuList() {
    List<Widget> spuList = [];

    for (int i = 0; i < c.spuList.length; i++) {
      var data = c.spuList[i];
      spuList.add(Container(
          height: 20,
          child: Stack(
            alignment: AlignmentDirectional.topEnd,
            children: [
              FlatButton(
                onPressed: () {
                  c.spuItemTap(i);
                },
                color: Colors.white,
                minWidth: 20,
                padding: EdgeInsets.only(left: 11, right: 11),
                shape: RoundedRectangleBorder(
                  side: BorderSide(
                      color: Theme.of(Get.context).primaryColor,
                      width: 1,
                      style: BorderStyle.solid),
                  borderRadius: BorderRadius.circular(2),
                ),
                child: Text(
                  data.mallTitle,
                  style: TextStyle(fontSize: 11, color: Color(0xFF333333)),
                ),
              ),
              c.categorySelectList[3] == i
                  ? Image.asset(R.assetsIconMallCategorysel,
                      fit: BoxFit.cover, width: 13, height: 10)
                  : Container(width: 0)
            ],
          )));
    }

    return spuList;
  }

  _getSkuList() {
    return Container(
      color: Color(0xFFF4F8FE),
      child: Column(
        children: [
          Expanded(
            child: c.skuList.length > 0
                ? ListView.builder(
                    padding: EdgeInsets.only(top: 5),
                    itemCount: c.skuList.length,
                    itemBuilder: (context, index) {
                      return Container(
                        padding: EdgeInsets.only(
                            left: 5, right: 5, top: 2, bottom: 2),
                        height: 62,
                        child: Container(
                          padding: EdgeInsets.only(
                              left: 8, right: 5, top: 8, bottom: 5),
                          decoration: BoxDecoration(
                              color: int.parse(c.textEdittingControllers[index]
                                          .text) >
                                      0
                                  ? Color(0xFFDBE9FE)
                                  : Colors.white,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(4)),
                              border: Border.all(
                                  width: 1, color: Color(0xFFE5F3F4))),
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Container(
                                      padding: EdgeInsets.only(
                                          left: 5, right: 5, top: 2, bottom: 2),
                                      color: Color(0xFFE5F3F4),
                                      child: Text(
                                        c.skuList[index].mallTitle,
                                        style: TextStyle(
                                          color: Color(0xFF6E6E6E),
                                          fontSize: ScreenUtil().setSp(8),
                                        ),
                                      )),
                                  SizedBox(width: 20),
                                  Text(
                                    c.skuList[index].skuSpec,
                                    style: TextStyle(
                                      color: Color(0xFF333333),
                                      fontSize: 14,
                                    ),
                                  ),
                                ],
                              ),
                              Row(
                                children: [
                                  GestureDetector(
                                    onTap: () {
                                      c.skuItemTap(index);
                                    },
                                    child: Image.asset(R.assetsIconMallTodo,
                                        width: 14, height: 14),
                                  ),
                                  Expanded(child: SizedBox()),
                                  Text("¥",
                                      style: TextStyle(
                                          color: Color(0xFFE05A3B),
                                          fontSize: 12,
                                          fontWeight: FontWeight.bold)),
                                  Text(c.skuList[index].price.toString(),
                                      style: TextStyle(
                                          color: Color(0xFFE05A3B),
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold)),
                                  Text("/",
                                      style: TextStyle(
                                        color: Color(0xFFE05A3B),
                                        fontSize: 8,
                                      )),
                                  Text(c.skuList[index].unit,
                                      style: TextStyle(
                                        color: Color(0xFFE05A3B),
                                        fontSize: 8,
                                      )),
                                  Expanded(child: SizedBox()),
                                  GestureDetector(
                                    onTap: () {
                                      c.subtractNumber(index);
                                    },
                                    child: Container(
                                        width: ScreenUtil().setSp(30),
                                        height: ScreenUtil().setSp(21),
                                        color: Colors.transparent,
                                        child: Align(child: Text("-"))),
                                  ),
                                  SizedBox(width: ScreenUtil().setSp(4)),
                                  Container(
                                    width: ScreenUtil().setSp(35),
                                    height: ScreenUtil().setSp(21),
                                    color: Color(0xFFECECEC),
                                    child: TextFormField(
//                    onFieldSubmitted: (v) => c.changeNum(v, index),
                                      controller:
                                      c.textEdittingControllers[index],
                                      keyboardType:
                                      TextInputType.numberWithOptions(
                                          decimal: true),
                                      style: TextStyle(
                                          fontSize: ScreenUtil().setSp(12)),
                                      textAlign: TextAlign.center,
                                      maxLines: 1,
                                      maxLength: 4,
                                      maxLengthEnforced: true,
                                      decoration: new InputDecoration(
                                        // contentPadding: EdgeInsets.only(left: 10, bottom: 15),
                                        border: InputBorder.none,
                                        fillColor: Colors.white,
                                        counterText: "",
                                      ),
                                    ),
                                  ),
                                  SizedBox(width: ScreenUtil().setSp(4)),
                                  GestureDetector(
                                    onTap: () {
                                      c.addNumber(index);
                                    },
                                    child: Container(
                                        width: ScreenUtil().setSp(23),
                                        height: ScreenUtil().setSp(21),
                                        color: Colors.transparent,
                                        child: Align(child: Text("+"))),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                      );
                    },
                  )
                : _noDataView(),
          ),
          SizedBox(height: 20),
          Container(
            decoration: BoxDecoration(
                color: Theme.of(Get.context).primaryColor,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(6), topRight: Radius.circular(6))),
            height: 38,
            child: Row(children: [
              SizedBox(width: 8),
              Text("已选:", style: TextStyle(color: Colors.white, fontSize: 10)),
              Text(c.totalPrice.toStringAsFixed(2),
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold)),
              Expanded(child: SizedBox()),
              Container(
                height: 23,
                child: FlatButton(
                    color: Colors.white,
                    minWidth: 100,
                    onPressed: c.addShopping,
                    child: Text(
                      "添加到购物车",
                      style: TextStyle(color: Color(0xFF40A8B3), fontSize: 12),
                    )),
              ),
              SizedBox(width: 10)
            ]),
          ),
        ],
      ),
    );
  }

  _categoryPageList() {
    var categoryList = c.mallInitList[c.categorySelectList[0]].categoryList;

    return Container(
      color: Color(0xFFF7F7F7),
      child: Row(children: [
        categoryList.length > 0
            ? Container(
                color: Color(0xFFF7F7F7),
                width: 60,
                height: double.infinity,
                child: MediaQuery.removePadding(
                  removeTop: true,
                  context: Get.context,
                  child: ListView.builder(
                    itemCount: categoryList.length,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          c.secondCategoryItemTap(index);
                        },
                        child: Container(
                          height: 44,
                          color: c.categorySelectList[2] == index
                              ? Color(0xFFF4F8FE)
                              : Color(0xFFF7F7F7),
                          child: Center(
                            child: Text(
                              categoryList[index].categoryName,
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: c.categorySelectList[2] == index
                                      ? Theme.of(Get.context).primaryColor
                                      : Color(0xFF6E6E6E),
                                  fontSize: 12),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              )
            : Container(),
        Expanded(
          child: Container(
              child: Column(
            children: [
              Container(
                child: Padding(
                  padding: const EdgeInsets.only(top: 5, left: 10, right: 10),
                  child: Wrap(
                    spacing: 5,
                    runSpacing: 5,
                    children: _getSpuList(),
                  ),
                ),
                width: double.infinity,
              ),
              Expanded(
                child: _getSkuList(),
              ),
            ],
          )),
        ),
      ]),
    );
  }

  _noDataView() {
    return Container(
        width: ScreenUtil().screenWidth,
        height: ScreenUtil().screenHeight,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              R.assetsIconNoaddress,
              width: 154,
              height: 154,
            ),
            SizedBox(height: 10),
            Text("没有数据！",
                style: TextStyle(color: Color(0xFF999999), fontSize: 14))
          ],
        ));
  }
}
